<!--
 * @Description: 
 * @Autor: HuiSir<273250950@qq.com>
 * @Date: 2023-03-31 10:56:19
 * @LastEditTime: 2023-03-31 14:25:13
-->
<template>
  <button class="btn1" :class="{ active }">
    <slot />
  </button>
</template>
 
<script lang="ts" setup>
defineProps({
  active: {
    type: Boolean,
    default: false
  }
})
</script>
 
<style scoped lang="scss">
button.btn1 {
  background: #122a50;
  border: unset;
  outline: unset;
  color: #fff;
  padding: 6px 15px;
  position: relative;
  font-size: 16px;
  cursor: pointer;
  transition: all .3s;

  &::before,
  &::after {
    content: "";
    position: absolute;
    width: 15px;
    height: calc(100% + 2px);
    border: 1px solid #5479b6;
    top: -1px;
  }

  &::before {
    left: 0;
    border-right: 0;
  }

  &::after {
    right: 0;
    border-left: 0;
  }

  &.active,
  &:hover {
    background: #0e5091;
    color: #3ec2e9;
  }
}
</style>